@import './base.css';

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 关键！禁止全局滚动 */
  height: 100%;
  width: 100%;
}

/* 重置 #app 相关影响布局的样式，使其适配弹性全屏布局 */
#app {
  /* 去掉最大宽度限制，让其可根据父容器（body）占满空间 */
  max-width: none;
  margin: 0; /* 去掉居中 margin，由弹性布局控制 */
  padding: 0; /* 去掉默认 padding，根据实际需求在子组件内设置 */
  font-weight: normal;
  width: 100%; /* 让 #app 占满 body 宽度 */
  height: 100%; /* 让 #app 占满 body 高度 */
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

/* 去掉对 body 布局的强制干扰，若需要整体弹性布局，可重新设置 */
@media (min-width: 1024px) {
  body {
    /* 注释或删除原本影响布局的 flex 相关设置，改为适合整体弹性布局的配置，比如： */
    display: block;
    /* place-items: center;  该属性一般用于 grid 布局，这里注释掉避免干扰 */
  }

  #app {
    /* 注释或删除 grid 布局相关设置，恢复弹性布局 */
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* padding: 0 2rem; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 0rem;
  }
}
